import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {Map, List} from 'immutable';
import Image from 'components/Image'
import {Table, Row, Col, Input, InputNumber} from 'antd';

import noop from 'util/noop';

@Relax
export default class BuyList extends Component {
    static defaultProps = {
        itemOrders: List(),
        order: Map(),
        taxRate: 0,

        changeNum: noop,
        changePrice: noop
    }


    render() {
        const {itemOrders} = this.props;

        return (
            <div className="buy-list">
                <Table bordered
                       pagination={false}
                       columns={this.renderColumns()}
                       dataSource={itemOrders.toJS()}/>
            </div>
        )
    }


    renderColumns() {
        const {itemOrders, order} = this.props;

        return [
            {
                title: "改价商品",
                dataIndex: "picUrl",
                width: 500,
                className:"bdr0",
                render: (picUrl, record, index)=>{
                    return {
                        children: (
                            <div className="order-goods-item">
                                <Row>
                                    <Col span={12}>
                                        <div className="order-goods-info">
                                            <Image className="ant-table-row-img" width={70} height={70} src={picUrl} alt={record.itemName}/>
                                            <p className="good-name" title={record.itemName}>{record.itemName}</p>
                                            <p className="t-grayer">{record.productSpecification}</p>
                                            <p className="t-grayer">商家编码：{record.articleNo}</p>
                                        </div>
                                    </Col>
                                    <Col span={10} offset={2}>
                                        <div className="goods-price t-right">
                                            <span className="t-red">&yen;</span>
                                            <InputNumber value={record.pervalue}
                                                         className="w80 ml3"
                                                         min={0}
                                                         max={100000}
                                                         onChange={(price)=>this.changePrice(price, 0, index)}/>
                                        </div>
                                    </Col>
                                </Row>
                            </div>
                        ),
                        props: {
                            colSpan: 2,
                        }
                    }
                }
            },
            {
                title: "成交单价",
                width: 100,
                className:"ant-table-th-right",
                dataIndex: "realPrice",
                render:()=>{
                    return {
                        children:{},
                        props: {
                            colSpan: 0,
                        },
                    }
                }
            },
            {
                title: "购买数量",
                width: 100,
                className:"ant-table-th-center va-t",
                dataIndex: "itemNumber",
                render:(num, record, index)=><div className="buy-num">{num}</div>
            },
            {
                title: "合计金额",
                width: 250,
                className:"ant-table-th-center va-t",
                dataIndex: "totalCash",
                render:(v, record, index)=>{
                    const obj = {
                        children: <p className="font-14 t-price"><span>&yen;{this.calculateTotal().toFixed(2)}</span></p>,
                        props: {},
                    };
                    if (index == 0) {
                        obj.props.rowSpan = itemOrders.count();
                    }
                    if (index > 0) {
                        obj.props.rowSpan = 0;
                    }
                    return obj;
                }
            }
        ]
    }


    calculateTotal = ()=>{
        const {itemOrders} = this.props;

        return itemOrders.reduce((total, item)=>{
            return total + item.get('pervalue') * item.get('itemNumber')
        }, 0)
    }


    changeNum(value, index) {
        if (value == undefined) {
            return;
        }

        this.props.changeNum(parseInt(value || 1, 10), index)
    }


    changePrice(price, type, index) {
        if (price == undefined) {
            return;
        } else if (price <= 0) {
            price = 0.01;
        } else {
            price = Math.floor(price * 100) / 100;
        }
        this.props.changePrice(price, 0, index);
    }
}
